<template>
    <div class="cmt-container">
        <h3>评论列表数据</h3>
        <hr>
        <textarea  placeholder="请输入要反馈的内容（最多120字）" id="cmt-textarea" maxlength="120"></textarea>
       
        <mt-button type="primary" size="large" >发表评论</mt-button>

        <div class="cmt-list">
             <div class="cmt-item" v-for="(item,index) in commonslist" :key='index'>
                 <div class="cmt-title">
                     第{{ index+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormate}}
                 </div>
                 <div class="cmt-body">
                     {{ item.content === '' ? '此用户很懒': item.content }}
                     <!-- {{ item.content==='undefined' ? '此用户很懒': item.content}} -->
                 </div>
             </div>
        </div>
        <mt-button type="danger" size="large" plain @click="addMoreClick">加载更多</mt-button>
    </div>
</template>

<script>

import { Toast } from 'mint-ui'

export default {

    data(){
      return{
          pageIndex:1,
          commonslist:[] //轮播图的数组
      }
    },
    created() {
      this.getNewsList();
    },
    methods:{
      getNewsList(){
        this.$http.get('api/getcomments/'+ this.id +'?pageindex='+this.pageIndex).then(result => {
          if (result.body.status === 0) {

            //  this.commonslist = result.body.message;
             this.commonslist = this.commonslist.concat(result.body.message);
             Toast('请求成功');
          }else{
              Toast('请求失败');
          }
        });
      },
      addMoreClick(){
          this.pageIndex++;
          this.getNewsList();
      }
    },

    props:['id']

}
</script>


<style lang="scss" scoped>

.cmt-container{
   h3 {
    font-size: 18px;
    color: #666;
   }

   textarea {
       font-size: 14px;
       height: 85px;
       margin: 0;
   }
   .cmt-list{
       margin: 5px 0;
       .cmt-item{
           font-size: 13px;
           .cmt-title{
             line-height: 35px;
             background-color: #ccc;
           }
           .cmt-body{
             line-height: 35px;
             text-indent: 2em;
           }
       }
   }
}

</style>